<template>
  <div>
    <div class="float-link-list">
      <ul class="nav">
        <li class="nav-item" v-for="item in linkList" :key="item.id">
          <a :href="item.link" v-text="item.text"></a>
        </li>
      </ul>
      <div class="back-top">
        <a href="javascript:;" @click="backTop">回顶</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkList: []
    }
  },
  methods: {
    loadLinkList() {
      let linkList = [
        {
          id: 1,
          text: '推荐',
          link: '/mall#recommend',
          sort: 1
        },
        {
          id: 2,
          text: '红茶',
          link: '/mall/search?keywords=红茶',
          sort: 2
        },
        {
          id: 3,
          text: '绿茶',
          link: '/mall/search?keywords=绿茶',
          sort: 3
        },
        {
          id: 4,
          text: '乌龙茶',
          link: '/mall/search?keywords=乌龙茶',
          sort: 4
        },
        {
          id: 5,
          text: '花茶',
          link: '/mall/search?keywords=花茶',
          sort: 5
        },
        {
          id: 6,
          text: '白茶',
          link: '/mall/search?keywords=白茶',
          sort: 6
        },
        {
          id: 7,
          text: '黑茶',
          link: '/mall/search?keywords=黑茶',
          sort: 7
        },
        {
          id: 8,
          text: '普洱',
          link: '/mall/search?keywords=普洱',
          sort: 8
        },
        {
          id: 9,
          text: '茶具',
          link: '/mall/search?keywords=茶具',
          sort: 9
        },
        {
          id: 10,
          text: '代用茶',
          link: '/mall/search?keywords=代用茶',
          sort: 10
        },
        {
          id: 11,
          text: '茶礼',
          link: '/mall/search?keywords=茶礼',
          sort: 11
        },
        {
          id: 12,
          text: '黄茶',
          link: '/mall/search?keywords=黄茶',
          sort: 12
        }
      ];
      this.linkList = linkList;
    },
    backTop() {
      window.scrollTo(0, 0);
    }
  },
  mounted() {
    this.loadLinkList();
  }
}
</script>

<style scoped>
.float-link-list {
  width: 100px;
}

.float-link-list a {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #333;
}

.float-link-list a:hover {
  background: #44B549;
  color: #fff;
}

.nav {
  background: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  flex-flow: wrap;
  padding: 8px 4px;
}

.nav-item {
}

.nav-item a {
  width: 40px;
  line-height: 25px;
  margin: 3px;
  background: #f5f5f5;
}

.back-top {
  margin-top: 5px;
  background: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.back-top a {
  width: 100px;
  line-height: 35px;
}

.back-top a:hover {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>